<template>
  <div class="title">
    <a-icon
      :style="`fontSize: 24px;color: ${getUploadSize == 0 ? '#52c41a' : '#1677FF'}`"
      :type="getUploadSize == 0 ? 'check-circle' : 'sync'"
      :spin="getUploadSize != 0"
    />
    <div class="text" v-if="getUploadSize != 0">正在上传{{ getUploadSize }}个文件</div>
    <div class="text" v-else>已上传{{ getCompleteSize }}个文件</div>
    <div class="icon" @click="handleCollapse">
      <a-icon
        v-if="getSize != 0"
        style="fontSize: 12px;"
        :type="collapse ? 'up' : 'down'"
      />
    </div>
  </div>
</template>
<script>
import Bus from '../vue-simple-uploader/js/bus'

export default {
  props: {
    uploadSize: Number,
    completeSize: Number
  },
  data () {
    return {
      collapse: false
    }
  },
  computed: {
    getSize () {
      return this.size
    },
    getUploadSize () {
      return this.uploadSize
    },
    getCompleteSize () {
      return this.completeSize
    }
  },
  methods: {
    handleCollapse () {
      this.collapse = !this.collapse
      Bus.$emit('changeCollapse', this.collapse)
    }
  }
}
</script>

<style lang="less" scoped>
  .title {
    font-size: 16px;
    display: flex;
    align-items: center;
    .text {
      padding: 0 10px;
    }
    .icon {
      cursor: pointer;
      margin-left: 20px;
      padding: 6px;
    }
  }
</style>
